<template>
  <div style="width: 350px;padding:0px 0px 10px 0px;margin-left: 20px;">
    <partial-view v-ref:pv>
      <criteria-paged :model="model" v-ref:paged :pager="false">
        <criteria partial='criteria' @condition-changed='$parent.$parent.selfSearch' v-ref:cri>
          <div novalidate class="flex-row select-overspread" partial style="white-space: nowarp;">
              <div class="form-group">
                <!-- <label>用户编号:</label> -->
                <input  type="text" class="form-control width-100" v-model="model.f_userinfo_id" placeholder='用户编号' condition="f_userinfo_id = '{}'">
              </div>
              <div class="form-group" style="flex: 1;">
                <!-- <label>操作类型:</label> -->
                <v-select id="f_paytype"
                v-model="model.f_operat_type"
                placeholder='操作类型'
                :value.sync="model.f_operat_type"
                :options='$parent.$parent.$parent.operationtypes'
                condition="f_operat_type = '{}'"
                close-on-select ></v-select>
                <partial name="cardcriteria"></partial>
              </div>
              <!-- <div class="form-group">
                <partial name="cardcriteria"></partial>
              </div> -->
              <div class="form-group">
                  <button class="btn btn-success width-100" @click="search()">查询</button>
              </div>

          </div>
        </criteria>
        <accordion :one-at-atime="true" type="info" partial="list">
          <panel type="info" v-for="row in model.rows" :is-open="true" :is-click="false">
            <span class="panel-title row" slot="header" @click="$parent.$parent.$parent.selected(row)" style="cursor: pointer;">
              <div class="col-sm-11">
                <div class="row">
                  <strong class="col-sm-4">{{row.f_userinfo_id}}</strong>
                  <span class="col-sm-4">{{$parent.$parent.$parent.dateDes(row.f_operate_date)}}</span>
                  <span class="col-sm-4">{{row.type}}</span>
                </div>
              </div>
              <div class="col-sm-1" v-if="$parent.$parent.$parent.isOperate">
                <dropdown class="auto"  v-if="row.type === '用户退费' || row.type === '机表收费' || row.type === '卡表收费' || row.type === '超用收费' || row.type === '发卡售气' || row.type === '其他收费' || row.type === '换表' || row.state === 1">
                  <button type="button" data-toggle="dropdown" style="border: 0px;background: none;">
                    <span class="glyphicon glyphicon-th-list"></span>
                  </button>
                  <ul slot="dropdown-menu" class="dropdown-menu dropdown-menu-right" style=" min-width: 60px;">
                    <li v-if="row.type === '用户退费' || row.type === '机表收费' || row.type === '卡表收费' || row.type === '超用收费' || row.type === '发卡售气' || row.type === '其他收费' || row.type === '支付宝支付' ||row.type === '微信支付' || row.type === '银行支付' ||row.type === '换表'">
                      <a href="#" @click.stop="$parent.$parent.$parent.operate('票据补打', row)">票据补打</a>
                    </li>
                    <li v-if="row.state === 1 &&  row.type !== '档案变更' && row.type !== '新增户档案' && row.type !== '银行代扣' && row.type !== '银行支付' && row.type !== '微信支付'">
                      <a href="#" @click.stop="$parent.$parent.$parent.operate('撤销', row)">撤销</a>
                    </li>
                  </ul>
                </dropdown>
              </div>

            </span>
            <div class="panel-body" v-if="$parent.$parent.$parent.isSelected(row)">
              <salecardgas-detail v-if="row.type === '发卡售气'" :data="row"></salecardgas-detail>
              <cardmetercenter-detail v-if="row.type === '卡表收费'" :data="row"></cardmetercenter-detail>
              <machinemetercenter-detail v-if="row.type === '机表收费'" :data="row"></machinemetercenter-detail>
              <autoaccounts-detail v-if="row.type === '自动下账'" :data="row"></autoaccounts-detail>
              <bankdk-detail v-if="row.type === '银行代扣'" :data="row"></bankdk-detail>
              <bank-pay v-if="row.type === '银行支付'" :data="row"></bank-pay>
              <wechat-pay v-if="row.type === '微信支付'" :data="row"></wechat-pay>
              <disablemanage-detail v-if="row.type === '停用'" :data="row"></disablemanage-detail>
              <enablemanage-detail v-if="row.type === '启用'" :data="row"></enablemanage-detail>
              <replacecardmanage-detail v-if="row.type === '补卡'" :data="row"></replacecardmanage-detail>
              <transfermanage-detail v-if="row.type === '过户'" :data="row"></transfermanage-detail>
              <othercharge-detail v-if="row.type === '其他收费'" :data="row"></othercharge-detail>
              <inputtorchange-detail v-if="row.type === '抄表员变更'" :data="row"></inputtorchange-detail>
              <offgasaddgas-detail v-if="row.type === '补气'" :data="row"></offgasaddgas-detail>
              <overuserchange-detail v-if="row.type === '超用收费'" :data="row"></overuserchange-detail>
              <adduser-detail v-if="row.type === '新增户档案'" :data="row"></adduser-detail>
              <gaspricechange-detail v-if="row.type === '气价变更'" :data="row"></gaspricechange-detail>
              <userchange-detail v-if="row.type === '档案变更'" :data="row"></userchange-detail>
              <changemeter-detail v-if="row.type === '换表'" :data="row"></changemeter-detail>
              <cardoveruser-detail v-if="row.type === '卡表超用'" :data="row"></cardoveruser-detail>
              <cancellation-detail v-if="row.type === '销户'" :data="row"></cancellation-detail>
              <refund-detail v-if="row.type === '用户退费'" :data="row"></refund-detail>
            </div>
            <div  v-if="!$parent.$parent.$parent.isSelected(row)" style="margin-top: 8px;background: #FFF;">
              <span>{{row.f_describe}}</span>
            </div>
          </panel>
        </accordion>
        <!-- <list :model="model"  partial="list"  v-ref:list @select-changed="$parent.$parent.isClose">
          <div class="panel panel-info" partial style="margin-bottom: 8px;">
            <div class="panel-heading" style="cursor: pointer;">
              <span class="panel-title row" >
                <div class="col-sm-11">
                  <div class="row">
                    <strong class="col-sm-4">{{row.f_userinfo_id}}</strong>
                    <span class="col-sm-4">{{$parent.$parent.$parent.$parent.haha(row.f_operate_date)}}</span>
                    <span class="col-sm-4">{{row.type}}</span>
                  </div>
                </div>
                <div class="col-sm-1">
                  <dropdown class="auto"  v-if="row.type === '机表收费' || row.type === '卡表收费' || row.type === '超用收费' || row.type === '发卡售气' || row.state === 1">
                    <button type="button" data-toggle="dropdown" style="border: 0px;background: none;">
                      <span class="glyphicon glyphicon-th-list"></span>
                    </button>
                    <ul slot="dropdown-menu" class="dropdown-menu dropdown-menu-right" style=" min-width: 60px;">
                      <li v-if="row.type === '机表收费' || row.type === '卡表收费' || row.type === '超用收费' || row.type === '发卡售气'">
                        <a href="#" @click.stop="$parent.$parent.$parent.$parent.operate('票据补打', row)">票据补打</a>
                      </li>
                      <li v-if = "row.state === 1">
                        <a href="#" @click.stop="$parent.$parent.$parent.$parent.operate('撤销', row)">撤销</a>
                      </li>
                    </ul>
                  </dropdown>
                </div>
              </span>
            </div>
            <div class="panel-body" v-if="isSelected(row)">
              <salecardgas-detail v-if="row.type === '发卡售气'" :data="row"></salecardgas-detail>
              <cardmetercenter-detail v-if="row.type === '卡表收费'" :data="row"></cardmetercenter-detail>
              <machinemetercenter-detail v-if="row.type === '机表收费'" :data="row"></machinemetercenter-detail>
              <autoaccounts-detail v-if="row.type === '自动下账'" :data="row"></autoaccounts-detail>
              <disablemanage-detail v-if="row.type === '停用'" :data="row"></disablemanage-detail>
              <enablemanage-detail v-if="row.type === '启用'" :data="row"></enablemanage-detail>
              <replacecardmanage-detail v-if="row.type === '补卡'" :data="row"></replacecardmanage-detail>
              <transfermanage-detail v-if="row.type === '过户'" :data="row"></transfermanage-detail>
              <othercharge-detail v-if="row.type === '其他收费'" :data="row"></othercharge-detail>
              <inputtorchange-detail v-if="row.type === '抄表员变更'" :data="row"></inputtorchange-detail>
              <offgasaddgas-detail v-if="row.type === '补气'" :data="row"></offgasaddgas-detail>
              <overuserchange-detail v-if="row.type === '超用收费'" :data="row"></overuserchange-detail>
              <adduser-detail v-if="row.type === '新增户档案'" :data="row"></adduser-detail>
              <gaspricechange-detail v-if="row.type === '气价变更'" :data="row"></gaspricechange-detail>
              <userchange-detail v-if="row.type === '档案变更'" :data="row"></userchange-detail>
              <changemeter-detail v-if="row.type === '换表'" :data="row"></changemeter-detail>
              <cardoveruser-detail v-if="row.type === '卡表超用'" :data="row"></cardoveruser-detail>
              <cancellation-detail v-if="row.type === '销户'" :data="row"></cancellation-detail>
            </div>
            <div class="panel-body" v-else>
              <span>{{row.f_describe}}</span>
            </div>
          </div>
        <list> -->
      </criteria-paged>
    </partial-view>
  </div>
  </template>
  <script>
  /**
  *操作记录信息
  */
  import { PagedList } from 'vue-client'
  import * as Util from '../../../Util'
  import co from 'co'
  import AppData from '../../../../stores/AppData'

  let cancelGen = function * (self, data) {
    let msgRet = yield self.$showMessage('撤销后数据不可恢复，确认撤销录入吗？', ['confirm', 'cancel'])
    if (msgRet === 'cancel') return
    // 撤销操作完成，刷新界面
    self.search()
  }

  export default {
    title: '操作汇总',
    data () {
      return {
        model: new PagedList(`${this.sqlurl}`, 9999,
         {items: '"' + this.items + '"', tablename: '"' + this.tablename + '"', orderitem: '"' + this.orderitem + '"'}),
        show: false,
        asideTitle: '用户操作',
        row: Object,
        comp: null
      }
    },
    props: {
      sqlurl: {
        type: String,
        default: 'rs/sql/getRecord'
      },
      items: {
        type: String,
        default: '*'
      },
      tablename: {
        type: String,
        default: 't_record'
      },
      orderitem: {
        type: String,
        default: 'f_operate_date desc'
      },
      btns: {
        type: Array
      },
      operationtype: {
        type: String,
        default: ''
      },
      userinfoid: {},
      isOperate: {
        type: Boolean,
        default: true
      }
    },
    ready () {
      this.$refs.paged.$refs.cri.model.f_operat_type = [this.operationtype]
      this.search()
      for (var i = 0; i < this.model.length; i++) {
        this.model[i].f_operate_date = this.model[i].f_operate_date.substring(16)
      }
    },
    methods: {
      dateDes (date) {
        return Util.dateDescripte(date)
      },
      selected (row) {
        if (this.row === row) {
          this.row = null
        } else {
          this.row = row
        }
      },
      isSelected (row) {
        return this.row === row
      },
      search () {
        let condition = '1=1'
        // this.$refs.paged.$refs.cri.search()
        if (!Util.f.parent.parent.name.includes('统一资源管理')) {
          condition += `and f_filiale = '${Util.f.f_fengongsi}'`
        }
        this.$refs.pv.load(this.sqlurl, {data: {condition: condition}}).then((a) => {
          if (a.data.length === 0) {
            this.model.rows = []
            this.model.state = '错误'
            this.model.error = '没有符合条件的记录'
            return
          }
          this.model.state = '正确'
          this.model.rows = a.data
        })
      },
      disEvent (btn) {
        this.$dispatch(`${btn.eventName}`)
      },
      operate (title, row) {
        if (title === '票据补打' && (row.type === '用户退费' || row.type === '机表收费' || row.type === '卡表收费' || row.type === '超用收费' || row.type === '发卡售气' || row.type === '银行支付' || row.type === '微信支付')) {
          this.$resetpost('rs/sql/getCardetail', {data: {id: 'id = ' + row.id}}, {resolveMsg: null, rejectMsg: null}).then((res) => {
            row = Object.assign({}, row, res.data[0])
            console.log('收费票据补打，，，，', row)
            if (row.type === '微信支付' || row.type === '银行支付' || row.type === '支付宝支付') {
              this.$dispatch('list-select-oper', `${row.type}票据补打`, 'other-bill', row)
            } else {
              this.$dispatch('list-select-oper', `${row.type}票据补打`, 'reissue-bill', row)
            }
          }).catch((error) => {
            if (error.status) {
              this.$warn(`加载数据出错, ${JSON.stringify(error)}`)
              return
            }
            throw error
          })
        } else if (title === '票据补打' && row.type === '其他收费') {
          this.$resetpost('rs/sql/singleTable_OrderBy', {data: {orderitem: 'id', items: '*',
          tablename: 't_othercharge', condition: 'id = ' + row.id}}).then((res) => {
            if (res.data[0].f_charge_type === '国税发票') {
              row = Object.assign({}, row, res.data[0])
              this.$dispatch('list-select-oper', `${row.type}票据补打`, 'reissue-other-bill', row)
            } else {
              row = Object.assign({}, row, res.data[0])
              this.$dispatch('list-select-oper', `${row.type}票据补打`, 'reissue-tax-other-bill', row)
            }
          }).catch((error) => {
            if (error.status) {
              this.$warn(`加载数据出错, ${JSON.stringify(error)}`)
              return
            }
            throw error
          })
        } else if (title === '票据补打' && row.type === '换表') {
          this.$resetpost('rs/sql/singleTable_OrderBy', {data: {orderitem: 'id', items: '*',
          tablename: 't_changemeter', condition: 'id = ' + row.id}}).then((res) => {
            row = Object.assign({}, row, res.data[0])
            this.$dispatch('list-select-oper', `${row.type}票据补打`, 'reissue-change-meter-bill', row)
          }).catch((error) => {
            if (error.status) {
              this.$warn(`加载数据出错, ${JSON.stringify(error)}`)
              return
            }
            throw error
          })
        } else if (title === '撤销') {
          this.$dispatch('list-select-oper', '撤销', 'record-cancel', row)
        }
      },
      // 撤销为统一操作，所以写到基础组件中
      operateCancel (row) {
        let cancel = cancelGen(this, row)
        co(cancel)
      },
      selfSearch (args) {
        if (!Util.f.parent.parent.name.includes('统一资源管理')) {
          args.condition += `and f_filiale = '${Util.f.f_fengongsi}'`
        }
        // args.condition = `${args.condition} and f_filiale = '${Util.f.f_fengongsi}'`
        this.model.search(args.condition, args.model)
      }
      // isClose (val) {
      //   // 再次点击收缩
      //   if (val.oldVal && val.oldVal.id === val.val.id) {
      //     this.$refs.paged.$refs.list.select(null)
      //   }
      // }
    },
    watch: {
      'userinfoid' (newVal) {
        if (newVal && newVal !== '') {
          this.$nextTick(function () {
            this.$refs.paged.$refs.cri.model.f_userinfo_id = newVal
          }.bind(this))
          this.$refs.paged.$refs.cri.model.f_operat_type = ''
          let condition = `f_userinfo_id = ${newVal} and f_filiale = '${Util.f.f_fengongsi}'`
          this.$refs.pv.load(this.sqlurl, {data: {condition: condition}}).then((a) => {
            if (a.data.length === 0) {
              this.model.rows = []
              this.model.state = '错误'
              this.model.error = '没有符合条件的记录'
              return
            }
            this.model.state = '正确'
            this.model.rows = a.data
          })
        } else {
          this.$refs.paged.$refs.cri.model.f_userinfo_id = ''
          this.$refs.paged.$refs.cri.model.f_operat_type = [this.operationtype]
          this.search()
        }
      }
    },
    computed: {
      operationtypes () {
        return [{label: '全部', value: ''}, ...AppData.getParam('操作类型')]
      }
    }
  }
  </script>
